<template>
  <a-breadcrumb v-if="target">
    <a-breadcrumb-item
      ><router-link to="/home">首页</router-link></a-breadcrumb-item
    >
    <a-breadcrumb-item
      ><router-link :to="`/${target}`">{{
        targetName
      }}</router-link></a-breadcrumb-item
    >
    <a-breadcrumb-item>{{ $route.params.name }}</a-breadcrumb-item>
  </a-breadcrumb>

  <a-skeleton :loading="loading" active :paragraph="{ rows: 16 }">
    <template v-if="articleList.length > 0">
      <section class="article-list">
        <card-article
          v-for="article in articleList"
          :key="article.id"
          :article="article"
        />
      </section>

      <a-pagination
        class="pagination-common"
        show-less-items
        v-model:current="pageInfo.pageNo"
        v-model:pageSize="pageInfo.pageSize"
        :total="total"
        simple
        v-on:change="onPageNoChange"
      />
    </template>

    <template v-else> <a-empty /> </template
  ></a-skeleton>

  <a-divider />
</template>

<script lang="ts">
import { Breadcrumb, Divider, Pagination } from 'ant-design-vue';
import { defineComponent, onMounted, reactive, ref, watchEffect } from 'vue';
import { pageSize } from '@/config/config';
import { useAsyncLoading } from '@/hooks/async';
import { useRoute } from 'vue-router';
import { articleService } from '@/api/article';
import { ArticleDTO } from '@/bean/dto';
import { format } from '@/utils/date-utils';

export default defineComponent({
  name: 'DomComponent',
  components: {
    [Breadcrumb.name]: Breadcrumb,
    [Breadcrumb.Item.name]: Breadcrumb.Item,
    [Divider.name]: Divider,
    [Pagination.name]: Pagination,
  },
  // 这里类型定义非常的难,因为如果数据对不上会报错
  props: ['target'],
  setup(props) {
    const targetName = props.target == 'tags' ? '所有标签' : '所有分类';

    const route = useRoute();
    const articleList = ref<ArticleDTO[]>([]);
    const pageInfo = reactive({ pageNo: 1, pageSize });

    const total = ref(0);

    const handleGetArticleList = async () => {
      let res = null;
      if (!props.target) {
        res = await articleService.Page(pageInfo);
      } else if (props.target === 'tags') {
        res = await articleService.PageByTag({
          ...pageInfo,
          keyword: route.params.name as string,
        });
      } else if (props.target === 'categories') {
        res = await articleService.pageByCategory({
          ...pageInfo,
          keyword: route.params.name as string,
        });
      }

      const formatData = res?.data.map((item) => {
        return {
          ...item,
          create_time: format(item.create_time, 'YYYY年M月D日 HH:mm:ss'),
        };
      });

      articleList.value = formatData || [];
      total.value = res?.total || 0;
    };

    // 获取数据
    const { trigger: getArticleList, loading } =
      useAsyncLoading(handleGetArticleList);

    watchEffect(() => {
      getArticleList();
    });

    // 分页变化
    const onPageNoChange = (page: number): void => {
      // console.log(page);
      pageInfo.pageNo = page;
      // console.log(document.documentElement.scrollTop);
      // 这玩意我看人家怎么封装成了一个东西,等下再去研究
      document.documentElement.scrollTop = 0;
    };

    return {
      targetName,
      onPageNoChange,
      articleList,
      pageInfo,
      total,
      loading,
    };
  },
});
</script>

<style scoped></style>
